<template>
  <tr>
    <td v-if="rowspan > 0" :rowspan="rowspan" style="background:rgb(250, 250, 250)">{{ rowspanTitle }}</td>
    <td>{{ title }}</td>
    <td>
      <!-- 判断是否开启 -->
      <template v-if="settingInfo.sms.disable == 0">
        <template v-if="settingInfo.sms.is_open">
          <a-tag color="blue" style="margin-right: 0">
            开启
          </a-tag>
        </template>
        <template v-else>
          <a-tag color="red" style="margin-right: 0">
            关闭
          </a-tag>
        </template>
        <a-divider type="vertical" />
        <a-button type="primary" size="small" @click="setSetting(sendType, 'sms')">设置</a-button>
      </template>
      <template v-else>
        -
      </template>
    </td>
    <td>
      <!-- 判断是否开启 -->
      <template v-if="settingInfo.miapp.disable == 0">
        <template v-if="settingInfo.miapp.is_open">
          <a-tag color="blue" style="margin-right: 0">
            开启
          </a-tag>
        </template>
        <template v-else>
          <a-tag color="red" style="margin-right: 0">
            关闭
          </a-tag>
        </template>
        <a-divider type="vertical" />
        <a-button type="primary" size="small" @click="setSetting(sendType, 'miapp')">设置</a-button>
      </template>
      <template v-else>
        -
      </template>
    </td>
    <td>
      <!-- 判断是否开启 -->
      <template v-if="settingInfo.wxaapi.disable == 0">
        <template v-if="settingInfo.wxaapi.is_open">
          <a-tag color="blue" style="margin-right: 0">
            开启
          </a-tag>
        </template>
        <template v-else>
          <a-tag color="red" style="margin-right: 0">
            关闭
          </a-tag>
        </template>
        <a-divider type="vertical" />
        <a-button type="primary" size="small" @click="setSetting(sendType, 'wxaapi')">设置</a-button>
      </template>
      <template v-else>
        -
      </template>
    </td>
    <td>{{ desc ? desc : '-' }}</td>
  </tr>
</template>

<script>
export default {
  name: 'NoticeTemplate',
  props: {
    // 类型
    sendType: {
      type: String,
      default: ''
    },
    // 备注
    desc: {
      type: String,
      default: ''
    },
    // 合并单元格数量 0 不显示该单元格
    rowspan: {
      type: Number,
      default: 1
    },
    // 单元格标题
    rowspanTitle: {
      type: String,
      default: ''
    },
    // 通知标题
    title: {
      type: String,
      default: ''
    },
    // 设置详情
    settingInfo: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
    }
  },
  methods: {
    setSetting (send_type, type) {
      this.$emit('setSetting', {
        send_type: send_type,
        type: type
      })
    }
  }
}
</script>

<style scoped>
th {
  padding: 10px;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
}
td {
  padding: 10px;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
}
tr {
  width: 100%;
  border-bottom: 1px solid #e8e8e8;
}
</style>
